<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>搜索图书馆</title>
    <script src="../../js/vue3.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #app {
            margin: 2rem auto;
            width: 30%;
        }
        
        li {
            display: flex;
            justify-content: space-between;
            margin: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: gray dashed 1px;
        }
        
        p {
            font-size: 1.5rem;
            font-weight: bold;
        }
        
        img {
            width: 100px;
            height: 100px;
        }
        
        div>div {
            width: 50%;
            margin: 0 auto;
        }
        
        input {
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="app">
        <div><input type="text" v-model="result"></div>
        <ul>
            <li v-for="item in games" v-show="IsShow(item)">
                <img :src="item.img">
                <p>{{item.name}}</p>
            </li>
        </ul>


    </div>
    <script>
        const v_app = Vue.createApp({
            data() {
                return {
                    result: "",
                    games: [{
                        name: "圣兽之王",
                        img: "../../img/img_0.png"
                    }, {
                        name: "星露谷物语",
                        img: "../../img/img_1.png"
                    }, {
                        name: "女神异闻录5",
                        img: "../../img/img_2.png"
                    }, {
                        name: "战地2042",
                        img: "../../img/img_3.png"
                    }, {
                        name: "数字123456",
                        img: "../../img/img_4.png"
                    }, {
                        name: "圣彼得堡",
                        img: "../../img/img_5.png"
                    }, {
                        name: "星际公民",
                        img: "../../img/img_6.png"
                    }],
                }
            },
            methods: {
                IsShow(itme) {
                    if (itme.name.search(this.result) != -1 || this.result == "") {
                        return true
                    } else {
                        return false
                    }
                }
            },
        });
        v_app.mount("#app");
    </script>
</body>

</html>